<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div style="overflow: hidden">
    <div style="background-color: #E4E8EB;padding: 16px 0px 16px 0px;min-width: 950px">
      <p align="left" style="font-size: 12px;margin: 0px;padding-left: 20px"><b>客户管理</b>模块为您展示具体的客户资料信息的同时，围绕您的业务场景也提供了丰富的功能操作入口
        <i title="帮助" @click="help" class="joys-icon-remind"
           style="color: #F5A623;width: 16px;height: 16px;font-size: 24px;"></i>
      </p>
    </div>
    <el-card body-style="padding-top: 0px">
      <div>
        <ft-pagination :total="totalRowNum" :current-page="currentPage" :page-size="pageSize" @pageChange="load">
          <el-row slot="toolbar">
            <el-col style="float: left;min-width: 850px;line-height: 30px">
              <el-button size="small" icon="joys-icon-refresh" type="primary" @click="load" style="float: left">刷新
              </el-button>
              <el-dropdown trigger="click" @command="add"
                           style="float: left;margin-left: 12px;height: 30px;margin-right: 72px;"
                           ShowDropDownArrow="false" class="dropdown-add">
                <el-button size="small"
                           type="primary"
                           style="width: 104px">
                  <i class="joys-icon-new" style="margin-right: 12px"/>
                  <span style="margin: 0px 25px 0px 0px">新建</span>
                  <i class="joys-icon-smalltriangle" style="font-size: 5px"/>
                </el-button>
                <el-dropdown-menu class="dropdown-menue-add" slot="dropdown"
                                  style="background-color: #232323;border-radius: 1px;padding: 0px;border: 0px">
                  <el-dropdown-item command="corp-add" class="dropdown-item-add" style="margin: 4px 0px 2px 0px">
                    <i class="joys-icon-businesscustomer" style="margin: 6.8px 12px 6.8px 6px;color: #C0C1C4;"/>
                    <span class="dropdown-item-font">
                      单位客户
                    </span>
                  </el-dropdown-item>
                  <el-dropdown-item command="person-add" class="dropdown-item-add" style="margin: 2px 0px 4px 0px">
                    <i class="joys-icon-men" style="margin: 6.8px 12px 6.8px 6px;color: #C0C1C4;"/>
                    <span class="dropdown-item-font">
                      个人客户
                    </span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <ft-advanced-query title="请输入客户名称/编号/证件号码进行搜索" @packup="packup" @load="search"></ft-advanced-query>
            </el-col>
          </el-row>
          <el-row v-if="showQueryPanel">
            <!--高级查询-->
            <customer-query-form @query="search" @change="corpQueryChange"></customer-query-form>
          </el-row>
          <div v-show="tableData.length==0" style="text-align: center;">
            <span>无客户数据，请先录入客户信息</span>
          </div>
          <el-table :data="tableData"
                    v-show="tableData.length>0"
                    v-loading="loading"
                    tooltip-effect="light"
                    class="tableClass">
            <el-table-column prop="customerName" show-overflow-tooltip label="客户名称" align="left" min-width="120">
              <template slot-scope="scope">
                <ft-link-text v-if="scope.row.detailedPermission" @click="dataCust(scope.row, true)" :text="scope.row.customerName"></ft-link-text>
                <span v-if="!scope.row.detailedPermission">{{scope.row.customerName}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="customerType" show-overflow-tooltip label="客户类型" align="center" min-width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.customerType">{{scope.row.customerType.label}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="identityType" show-overflow-tooltip label="证件类型" align="center" min-width="120">
              <template slot-scope="scope">
                <ft-enum-select v-if="scope.row.customerType&&scope.row.customerType.value == 'PERSONAL'"
                                v-model="scope.row.identityType"
                                :editing="false"
                                service-name="lss-customer"
                                type-name="personalType"
                                size="small"/>
                <ft-enum-select v-else-if="scope.row.customerType" v-model="scope.row.identityType"
                                service-name="lss-customer"
                                :editing="false"
                                type-name="certificateType"
                                size="small"/>
              </template>
            </el-table-column>
            <el-table-column prop="identityNo" show-overflow-tooltip label="证件号码" align="left" min-width="120"/>
            <el-table-column prop="mainManagerName" show-overflow-tooltip label="主办客户经理" align="left"
                             min-width="120"></el-table-column>
            <el-table-column prop="deptName" show-overflow-tooltip label="所属部门" align="left"
                             min-width="120"></el-table-column>
            <el-table-column prop="creationTs" show-overflow-tooltip label="建户日期" align="left"
                             min-width="120"></el-table-column>
          </el-table>
        </ft-pagination>
      </div>
    </el-card>
    <ft-file-help-preview v-model="previewPath" ref="filePreviewRef" title="客户帮助文档"></ft-file-help-preview>
  </div>
</template>
<script>
  import FtDatePicker from "./ft/FtDatePicker"
  import FtUser from "./ft/FtUser";
  import CustomerQueryForm from "./CustomerQueryForm";

  export default {
    name: "CustomerList",
    props: {
      propsBind: {
        //展示页面
        currentPage: {
          default: 1
        },
        //页面条数
        pageSize: {
          default: 8
        }
      }
    },
    components: {CustomerQueryForm, FtUser, FtDatePicker},
    data() {
      return {
        previewPath: '/doc/template/在线帮助/客户帮助.docj',
        currentPage: this.propsBind.currentPage,
        pageSize: this.propsBind.pageSize,
        totalRowNum: 0,
        tableEnumEdit: false,
        tableData: [],
        formart: 'yyyy-MM-dd',
        dialogTableVisible: false,
        condition: {},
        ininQuery: true,
        searchOptions: [{
          value: 'customerType',
          label: '客户类型'
        }, {
          value: 'customerName',
          label: '客户名称'
        }, {
          value: 'customerManagerName',
          label: '主办客户经理'
        }, {
          value: 'deptName',
          label: '所属部门'
        }],
        loading: true,
        showQueryPanel: false,
        corpQuery: {},
        searchCondition: '',
        querParam: {},
      }
    },
    methods: {
      load(pageIndex, pageSize) {
        this.loading = true
        if ('' !== pageIndex && pageSize) {
          this.currentPage = pageIndex
          this.pageSize = pageSize
        } else {
          this.currentPage = this.currentPage
          this.pageSize = this.pageSize
        }
        if (!this.querParam) {
          this.querParam = {}
        }
        this.$http.post('/joys-rest/lss-customer/custInfo/list', this.querParam,
          {
            params: {
              pageIndex: this.currentPage,
              pageSize: this.pageSize,
            }
          }).then(
          resp => {
            this.tableData = resp.body.rows
            this.totalRowNum = resp.body.total
            this.loading = false
          },
          resp => {
            this.$message.error(resp.body.message)
            this.loading = false
          })
      },
      search(querParam) {
        querParam.initQuery = false
        this.querParam = querParam
        this.currentPage = 1
        this.load(this.currentPage, this.pageSize)
      },
      corpQueryChange(querParam) {
        querParam.initQuery = false
        this.querParam = querParam
        this.currentPage = 1
      },
      //新增客户
      add(value) {
        this.propsBind.pageSize = this.pageSize
        this.propsBind.currentPage = this.currentPage
        this.$emit("returnValue", {switchShow: value, propsBind: this.propsBind})
      },
      //查看
      dataCust(row, op) {
        this.propsBind.pageSize = this.pageSize
        this.propsBind.currentPage = this.currentPage
        //个人客户查询
        if (row.customerType && row.customerType.value == 'PERSONAL') {
          this.$emit("returnValue", {
            switchShow: 'person',
            propsBind: this.propsBind,
            customerId: row.customerId,
            initEdit: true
          })
        } else {
          this.$emit("returnValue", {
            switchShow: 'corp',
            propsBind: this.propsBind,
            customerId: row.customerId,
            initEdit: true
          })
        }
      },
      returnValue(value) {
        this.propsBind.pageSize = this.pageSize
        this.propsBind.currentPage = this.currentPage
        this.dialogTableVisible = value.dialogTableVisible
        this.$emit("returnValue", {
          switchShow: value.switchShow,
          propsBind: this.propsBind,
          customerId: value.customerId,
          initEdit: true
        })
      },
      //帮助操作
      help() {
        this.$refs.filePreviewRef.dialogVisible = true
        this.$refs.filePreviewRef.load()
      },
      packup(showQueryPanel) {
        this.showQueryPanel = showQueryPanel
      }
    }
  }
</script>
<style>
  .el-table__body-wrapper {
    overflow-y: scroll;
    position: relative;
  }

  .el-select-el-input {
    float: left;
  }

  .el-select-el-input .el-input__inner {
    border-radius: 9px;
  }

  .dropdown-menue-add.el-popper .popper__arrow {
    border-width: 0px
  }

  .dropdown-menue-add.el-popper .popper__arrow:after {
    border-width: 0px
  }

  .dropdown-item-font {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #C0C1C4;
    margin: 6px 0px 6px 0px;
  }

  .dropdown-menue-add .el-dropdown-menu__item {
    height: 28px;
    line-height: 0px;
    padding: 0px;
    width: 104px;
    background: #232323;
  }

  .dropdown-menue-add.el-popper[x-placement^="bottom"] {
    margin-top: 1px;
  }

  .dropdown-item-add.el-dropdown-menu__item:focus, .dropdown-item.el-dropdown-menu__item:not(.is-disabled):hover {
    height: 28px;
    line-height: 0px;
    padding: 0px;
    width: 104px;
    background: #001616;
  }

  .dropdown-item-add.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
    height: 28px;
    line-height: 0px;
    padding: 0px;
    width: 104px;
    background: #001616;
  }

  .tableClass .cell {
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #fengbaoBtnClass {
    background-color: #EF442B;
    border-color: #EF442B
  }

  #fengbaoBtnClass:hover {
    background-color: #D62F17;
    border-color: #D62F17
  }
</style>
<style scoped>

</style>
